<template>
<div class="billupdate">
  <van-row>
    <van-col span="12">
      <van-button plain type="info">拍照识别</van-button>
    </van-col>
    <van-col span="12">
      <van-button plain type="info">扫码识别</van-button>
    </van-col>
  </van-row>
  <van-form @submit="onSubmit">
    <van-field
      v-model="amount"
      name="金额"
      label="金额"
      placeholder="请输入金额"
      :rules="[{ required: true, message: '请填写金额' }]"
    />
    <van-field
      v-model="billitems"
      name="项目"
      label="项目"
      placeholder="请输入项目"
      :rules="[{ required: true, message: '请填写项目名' }]"
    >
    </van-field>
    <van-field
      v-model="explain"
      name="说明"
      label="说明"
      placeholder="请输入费用说明"
      :rules="[{ required: true, message: '请填写费用说明' }]"
    />
    <van-row>
      <van-col span="18">
        <van-field name="uploader">
          <template #input>
            <van-uploader v-model="uploader" />
          </template>
        </van-field>
      </van-col>
      <van-col span="6">
        <div class="smallbtngroup">
          <van-button type="danger" size="small">清除录入</van-button>
          <van-button type="primary" size="small" @save="onSave" >添加录入</van-button>
        </div>
      </van-col>
    </van-row>
  </van-form>
  <div class="bottom-row">
    <div class="bill_list_title">
      <div>发票总额: ¥{{amounttotal}}</div><div>发票数量: {{billtotal}}</div>
    </div>
    <van-form @submit="listSubmit">
      <van-swipe-cell v-for="(item, index) in list" :key="index">
        <van-card
          :price="item.billamount"
          :desc="item.billmessage"
          :title="item.billname"
          thumb="https://img.yzcdn.cn/vant/cat.jpeg">
          <template #footer>
            <span style="color: #969799">左滑删除</span>
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submitlist">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</div>
</template>

<script>
export default {
  name: 'BillUpload',

  data() {
    return {
      amount: '',
      billitems: '',
      explain: '',

      uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
      list: [
        { billname: '门诊挂号费', billamount: '20.00', billmessage:'北医三院挂号费', },
        { billname: '检查费', billamount: '188.88', billmessage:'' },
        { billname: '中药费', billamount: '120.99', billmessage:'' },
      ],
      amounttotal: '2222222.00',
      billtotal: '10',
    };
  },
  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    onSubmit(values) {
      console.log('submit', values);
    },
    listSubmit(values) {
      console.log('submitlist', values);
    },
    onSave(info) {
      this.showEdit = false;
      this.showList = false;

      if (this.isEdit) {
        this.list = this.list.map((item) =>
          item.id === info.id ? info : item
        );
      } else {
        this.list.push(info);
      }
      this.chosenContactId = info.id;
    },
  },
};
</script>

<style scoped>

</style>
